import React, { useState, useRef, useEffect } from 'react'

import { InputCode, NextBtn } from './styled'

export default ({ setShareInstallData }) => {

    const refInputCode = useRef()

    const [code, setCode] = useState('')
    const [nextBtnDisabled, setNextBtnDisabled] = useState(true)

    useEffect(() => {
        setNextBtnDisabled(code.length < 6)
    }, [code])

    return <>
        <InputCode ref={refInputCode}
            maxlength={6}
            placeholder="输入邀请码"
            value={code}
            onChange={() => {
                if (!refInputCode.current) return
                var _code = refInputCode.current.value.replace(/' '/g, '')
                if (_code.length > 6) _code = _code.substring(0, 6)
                setCode(_code)
            }} />
        <NextBtn disabled={nextBtnDisabled} onClick={() => {
            if (nextBtnDisabled) return

            setShareInstallData({ cardno: code })
        }}>下载20</NextBtn>
    </>
}